<template>
  <div id="followDetail">
    <div class="homeTitle">
      <span>{{data.sIndicatorName}}指标关注详情</span>
      <div>
        <el-button type="primary" size="small" @click="$router.go(-1)">返回</el-button>
        <el-button type="primary" size="small" @click="daochu">导出</el-button>
        <el-button type="primary" size="small" @click="follow">关注管理</el-button>
        <el-button type="primary" size="small" @click="qiehuan">切换行社\机构</el-button>
      </div>
    </div>
    <!-- -------------- -->
    <div class="followTitle">
      <span>显示当前的行社\机构名称{{data.bank}}</span>
      <span>{{data.state? '已关注':'未关注'}}</span>
    </div>
    <div class="followbox">
      <div class="boxTop">
        <div class="condetail">
          <p>{{data.sIndicatorName}}</p>
          <p>{{data.bNowValue}}</p>
        </div>
        <div class="shuoming" v-if="data.indicatorDef">
          <p>指标说明</p>
          <p>{{data.indicatorDef}}</p>
        </div>
      </div>
      <!-- ---echars--------- -->
      <div class="echarsbox">
        <div class="tipL">
          <span>监管要求</span>
          <span>超标线</span>
          <span>报警线</span>
          <span>提醒线</span>
        </div>
        <div class="echars">
          <div id="myChart" class="line"></div>
        </div>
        <div class="tipR" v-if="data.state">
          <span>严重</span>
          <span>中等</span>
          <span>普通</span>
        </div>
      </div>
      <!-- -------滑块------- -->
      <div class="block">
        <p>时间轴：</p>
        <el-slider
          v-model="huakuai"
          :min="3"
          :max="60"
          :format-tooltip="formatTooltip"
          @change="changeTime"
        ></el-slider>
      </div>
    </div>
    <div class="table">
      <!-- 表格 -->
      <div class="tablecon">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="wCreateTime" label="监控日期" align="center" :formatter="dateTable"></el-table-column>
          <el-table-column prop="wWarnBank" label="指标名称" align="center"></el-table-column>
          <el-table-column prop="wRestrictValue" label="指标监管值" align="center" ></el-table-column>
          <el-table-column prop="wNowValue" label="指标监控值" align="center" ></el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="pgfy">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "followDetail",
  data() {
    return {
      tableData: [],
      riqi: [],
      value: [],
      data: "",
      // 分页
      currentPage: 1,
      total: 0,
      huakuai: 3
    };
  },
  mounted() {
    this.gettop();
    this.getbottom();
  },
  methods: {
    daochu() {
      let obj = {
        bivId: this.$route.query.bivId,
        date: this.huakuai
      };
      this.axios
        .get(
          "internalIndicator/exportAllByBivId",
          { params: obj, responseType: "blob"},
        )
        .then(res => {
          console.log(res);
          this.download(res.data, "指标监控");
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    download(data, filename) {
      if (!data) {
        return;
      }
      var blob = new Blob([data], { type: "application/vnd.ms-excel" });
      var url = window.URL.createObjectURL(blob);
      var aLink = document.createElement("a");
      aLink.style.display = "none";
      aLink.href = url;
      aLink.setAttribute("download", decodeURI(filename));
      document.body.appendChild(aLink);
      aLink.click();
      document.body.removeChild(aLink); //下载完成移除元素
      window.URL.revokeObjectURL(url); //释放掉blob对象
    },
    baifenbi(row, column) {
      return Number(row[column.property]).toFixed(2) + "%";
    },
    // echarts实例
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            let data = params[0].name;
            let value = params[0].value;
            return (
              "日期：" + data + "； " + "当前值" + (value - 0).toFixed(2) + "%"
            );
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.riqi
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "当前值",
            type: "line",
            data: this.value,
            markLine: {
              itemStyle: {
                normal: {
                  lineStyle: {
                    type: "dashed"
                    // 这儿设置的颜色是公共配置，如需单独配置，请在data里配置
                    // color: '#000',
                  },
                  label: {
                    show: true,
                    position: "end"
                  }
                }
              },
              data: [
                {
                  name: "监管要求",
                  yAxis: this.data.sRestrictValue,
                  // 单独配置每条线的样式
                  lineStyle: {
                    color: "#A93D5D"
                  }
                },
                {
                  name: "超标线",
                  yAxis: this.data.sExceedValue,
                  lineStyle: {
                    color: "#F47162"
                  }
                },
                {
                  name: "报警线",
                  yAxis: this.data.sAlarmValue,
                  lineStyle: {
                    color: "#FF9900"
                  }
                },
                {
                  name: "提醒线",
                  yAxis: this.data.sRemindValue,
                  lineStyle: {
                    color: "#F9AFA6"
                  }
                },
                {
                  name: "严重",
                  yAxis: this.data.uSeverityValue,
                  lineStyle: {
                    color: "#510051"
                  }
                },
                {
                  name: "中等",
                  yAxis: this.data.uMediumValue,
                  lineStyle: {
                    color: "#990099"
                  }
                },
                {
                  name: "普通",
                  yAxis: this.data.uCommonValue,
                  lineStyle: {
                    color: "#9999CC"
                  }
                }
              ]
            }
          }
        ]
      });
    },
    // 上面的接口
    gettop() {
      this.axios
        .get("internalIndicator/findAllByBivId", {
          params: { bivId: this.$route.query.bivId, date: this.huakuai }
        })
        .then(({ data }) => {
          if (data.code == 200) {
            this.data = data.data;
            if (!this.data.uSeverityValue) {
              this.data.uSeverityValue = -1;
            }
            if (!this.data.uMediumValue) {
              this.data.uMediumValue = -1;
            }
            if (!this.data.uCommonValue) {
              this.data.uCommonValue = -1;
            }
            this.data.list.forEach((item, index) => {
              this.riqi.push(this.dateMoment(item.wCreateTime, "YYYY-MM-DD"));
              this.value.push(item.wNowValue);
            });
            this.drawLine(); // 初始化echars
          }
        });
    },
    formatTooltip(val) {
      return `近${val}天`;
    },
    changeTime() {
      this.riqi = [];
      this.value = [];
      this.gettop();
    },
    // 下面表格的接口
    getbottom() {
      let obj = {
        bivId: this.$route.query.bivId,
        limit: 10,
        page: this.currentPage
      };
      this.axios
        .get("internalIndicator/findRecordByBivId", { params: obj })
        .then(({ data }) => {
          if (data.code == 200) {
            this.tableData = data.data;
            this.total = data.pageInfo.total;
          }
        });
    },
    follow() {
      this.$router.push({
        path: "followTargetDetail",
        query: { id: this.data.sId, title: this.data.sIndicatorName }
      });
    },
    qiehuan() {
      this.$router.push({ path: "chooseOne" });
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    // 分页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getbottom(val);
    }
  }
};
</script>

<style lang="scss">
#followDetail {
  .homeTitle {
    display: flex;
    justify-content: space-between;
    padding-right: 20px;
  }
  .followTitle {
    height: 50px;
    padding: 0 20px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
      &:last-child {
        color: #409eff;
      }
    }
  }
  .followbox {
    background: white;
    .boxTop {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 20px;
      .condetail {
        padding: 10px;
        border: 1px solid black;
        margin-right: 30px;
        margin-bottom: 20px;
        height: 50px;
        p {
          text-align: center;
          white-space: nowrap;
          &:last-child {
            color: orange;
          }
        }
      }
      .shuoming {
        p {
          word-break: break-all;
        }
      }
    }
    .echarsbox {
      position: relative;
      padding: 0 100px;
      .echars {
        height: 350px;
        .line {
          width: 100%;
          height: 350px;
        }
      }
      .tipL,
      .tipR {
        position: absolute;
        width: 100px;
        height: 350px;
        top: 0;
      }
      .tipL {
        left: 20px;
        display: flex;
        flex-direction: column;
        > span {
          color: white;
          text-align: center;
          padding: 2px 5px;
          margin-top: 10px;
          position: relative;
          z-index: 66;
          // #A93D5D #F47162 #FF9900 #F9AFA6
          // #510051 #990099 #9999CC
          &::before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-width: 14px;
            border-style: solid;
            right: -28px;
            top: 0;
          }
          &:nth-of-type(1) {
            margin-top: 70px;
            background: #a93d5d;
            &::before {
              border-color: transparent transparent transparent #a93d5d;
            }
          }
          &:nth-of-type(2) {
            background: #f47162;
            &::before {
              border-color: transparent transparent transparent #f47162;
            }
          }
          &:nth-of-type(3) {
            background: #ff9900;
            &::before {
              border-color: transparent transparent transparent #ff9900;
            }
          }
          &:nth-of-type(4) {
            background: #f9afa6;
            &::before {
              border-color: transparent transparent transparent #f9afa6;
            }
          }
        }
      }
      .tipR {
        right: 20px;
        display: flex;
        flex-direction: column;
        > span {
          color: white;
          text-align: center;
          padding: 2px 5px;
          margin-top: 10px;
          position: relative;
          z-index: 66;
          &::before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-width: 14px;
            border-style: solid;
            left: -28px;
            top: 0;
          }
          &:nth-of-type(1) {
            margin-top: 70px;
            background: #510051;
            &::before {
              border-color: transparent #510051 transparent transparent;
            }
          }
          &:nth-of-type(2) {
            background: #990099;
            &::before {
              border-color: transparent #990099 transparent transparent;
            }
          }
          &:nth-of-type(3) {
            background: #9999cc;
            &::before {
              border-color: transparent #9999cc transparent transparent;
            }
          }
        }
      }
    }
    .block {
      padding: 0 200px 20px;
    }
  }
  // ------表格------
  .table {
    background: white;
    margin-top: 40px;
    .tablecon {
      padding: 20px;
    }
    .pgfy {
      padding: 20px;
      padding-top: 10px;
      text-align: right;
    }
  }
}
</style>
